<template>
	<view>
		<view :class="['page',data.__page_classes]">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
    <view class="body after-navber">
        <view class="container">
            <scroll-view class="nnavbar fs-sm-13" :scrollIntoView="data.toView" :scrollLeft="data.scrollNavbarLeft" scrollWithAnimation="true" scrollX="true" v-if="data.navigation">
                <view class="view1">
                    <view catchtap="onTapNavbar" class="navbar-item " :hidden="!data.navigation" id="0">
                        <view :class="['navbar-item-wrap',data.backgrop[0]]">全部</view>
                    </view>
                    <view catchtap="onTapNavbar" class="navbar-item " :hidden="!data.navigation" id="-1">
                        <view :class="['navbar-item-wrap', data.backgrop[1]]">精选</view>
                    </view>
                    <view catchtap="onTapNavbar" class="navbar-item" :id="data.navbarArray[item].id" v-for="(item,index) in data.navbarShowIndexArray" :key="item.id">
                        <view :class="['navbar-item-wrap',data.navbarArray[item].type]">{{data.navbarArray[item].name}}</view>
                    </view>
                </view>
            </scroll-view>
            <view class="hideview" v-if="data.navigation"></view>
            <scroll-view class="articles" :hidden="data.articlesHide">
                <view class="after-navber">
                    <view class="list">
                        <block v-for="(item,index) in data.list" :key="item.id">
                            <navigator class="item layout-0" :url="'/pages/topic/topic?id='+item.id" v-if="item.layout==0">
                                <view class="flex-row">
                                    <view class="flex-grow-1 flex-col">
                                        <view class="flex-grow-1">
                                            <view class="title">{{item.title}}</view>
                                        </view>
                                        <view class="flex-grow-0 read-count fs-sm">{{item.read_count}}</view>
                                    </view>
                                    <view class="flex-grow-0" style="position: relative">
                                        <image class="cover-pic" mode="aspectFill" :src="item.cover_pic"></image>
                                        <view class="goods-count" v-if="item.goods_count">{{item.goods_count}}</view>
                                    </view>
                                </view>
                            </navigator>
                            <navigator class="item layout-1" :url="'/pages/topic/topic?id='+item.id" v-if="item.layout==1">
                                <view class="title" style="font-weight: 600">{{item.title}}</view>
                                <image class="cover-pic" mode="aspectFill" :src="item.cover_pic"></image>
                                <view class="flex-row">
                                    <view class="flex-grow-1 read-count fs-sm">{{item.read_count}}</view>
                                    <view class="flex-grow-0 goods-count" v-if="item.goods_count">{{item.goods_count}}</view>
                                </view>
                            </navigator>
                        </block>
                    </view>
                    <view class="no-content" v-if="!data.is_loading&&(!data.list||data.list.length==0)">暂无内容</view>
                    <view :class="['loading-more', data.is_loading?'active':'']">
                        <image :src="data.__wxapp_img.system.loading.url"></image>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
    <comp-footer v-bind="{data:data}"></comp-footer>
</view>

	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data:{
					backgrop: [ "navbar-item-active" ],
					navbarArray: [],
					navbarShowIndexArray: 0,
					navigation: !1,
					windowWidth: 375,
					scrollNavbarLeft: 0,
					currentChannelIndex: 0,
					articlesHide: !1
				}
			};
		},
		onLoad: function(a) {myVue = this;
        myVue.getApp.page.onLoad(this, a);
        var t = this, e = a.type;
        void 0 !== e && e && t.setData({
            typeid: e
        }), t.loadTopicList({
            page: 1,
            reload: !0
        }), myVue.getApp.core.getSystemInfo({
            success: function(a) {
                t.setData({
                    windowWidth: a.windowWidth
                });
            }
        });
    },
		onShow: function() {
        myVue.getApp.page.onShow(this);
    },
    onPullDownRefresh: function() {
        myVue.getApp.page.onPullDownRefresh(this);
        var a = this.data.currentChannelIndex;
        this.switchChannel(parseInt(a)), this.sortTopic({
            page: 1,
            type: parseInt(a),
            reload: !0
        }), myVue.getApp.core.stopPullDownRefresh();
    },
    onReachBottom: function() {
        myVue.getApp.page.onReachBottom(this);
        var a = this.data.currentChannelIndex;
        this.switchChannel(parseInt(a)), this.sortTopic({
            page: this.data.page + 1,
            type: parseInt(a),
            loadmore: !0
        });
    },
		onShareAppMessage: function() {
        myVue.getApp.page.onShareAppMessage(this);
        var a = this, t = {
            path: "/pages/topic-list/topic-list?user_id=" + a.data.__user_info.id + "&type=" + (a.data.typeid ? a.data.typeid : ""),
            success: function(a) {}
        };
        return console.log(t.path), t;
    },
		methods:{
			loadTopicList: function(a) {
        var t = this;
        t.data.is_loading || a.loadmore && !t.data.is_more || (t.setData({
            is_loading: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.default.topic_type,
            success: function(e) {
                0 == e.code && t.setData({
                    navbarArray: e.data.list,
                    navbarShowIndexArray: Array.from(Array(e.data.list.length).keys()),
                    navigation: "" != e.data.list
                }), t.getApp.request({
                    url: t.getApp.api.default.topic_list,
                    data: {
                        page: a.page
                    },
                    success: function(e) {
                        if (0 == e.code) if (void 0 !== t.data.typeid) {
                            for (var i = 0, r = 0; r < t.data.navbarArray.length && (i += 66, t.data.navbarArray[r].id != t.data.typeid); r++) ;
                            t.setData({
                                scrollNavbarLeft: i
                            }), t.switchChannel(parseInt(t.data.typeid)), t.sortTopic({
                                page: 1,
                                type: t.data.typeid,
                                reload: !0
                            });
                        } else a.reload && t.setData({
                            list: e.data.list,
                            page: a.page,
                            is_more: e.data.list.length > 0
                        }), a.loadmore && t.setData({
                            list: t.data.list.concat(e.data.list),
                            page: a.page,
                            is_more: e.data.list.length > 0
                        });
                    },
                    complete: function() {
                        t.setData({
                            is_loading: !1
                        });
                    }
                });
            }
        }));
    },
		onTapNavbar: function(a) {
        var t = this;
        if ("undefined" == typeof my) {
            var e = a.currentTarget.offsetLeft;
            t.setData({
                scrollNavbarLeft: e - 85
            });
        } else {
            var i = t.data.navbarArray, r = !0;
            i.forEach(function(e, n, s) {
                a.currentTarget.id == e.id && (r = !1, n >= 1 ? t.setData({
                    toView: i[n - 1].id
                }) : t.setData({
                    toView: -1
                }));
            }), r && t.setData({
                toView: "0"
            });
        }
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), t.switchChannel(parseInt(a.currentTarget.id)), t.sortTopic({
            page: 1,
            type: a.currentTarget.id,
            reload: !0
        });
    },
    sortTopic: function(a) {
        var t = this;
        myVue.getApp.request({
            url: myVue.getApp.api.default.topic_list,
            data: a,
            success: function(e) {
                0 == e.code && (a.reload && t.setData({
                    list: e.data.list,
                    page: a.page,
                    is_more: e.data.list.length > 0
                }), a.loadmore && t.setData({
                    list: t.data.list.concat(e.data.list),
                    page: a.page,
                    is_more: e.data.list.length > 0
                }), t.getApp.core.hideLoading());
            }
        });
    },
    switchChannel: function(a) {
        var t = this.data.navbarArray, e = new Array();
        -1 == a ? e[1] = "navbar-item-active" : 0 == a && (e[0] = "navbar-item-active"), 
        t.forEach(function(t, e, i) {
            t.type = "", t.id == a && (t.type = "navbar-item-active");
        }), this.setData({
            navbarArray: t,
            currentChannelIndex: a,
            backgrop: e
        });
    },
		}
	}
</script>

<style scoped>
.list {
    border-top: 0upx solid #e3e3e3;
}

.list .item {
    display: block;
    background: #fff;
    padding: 34upx 24upx;
    margin-bottom: 10upx;
}

.list .item .title {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list .item .cover-pic {
    width: 268upx;
    height: 202upx;
    margin-left: 10upx;
    display: block;
}

.list .item .goods-count,.list .item .read-count {
    color: #888;
}

.list .item.layout-1 .title {
    margin-bottom: 24upx;
    -webkit-line-clamp: 2;
}

.list .item.layout-1 .cover-pic {
    width: 702upx;
    height: 350upx;
    margin-left: 0;
    margin-bottom: 24upx;
}

.list .item.layout-0 .goods-count {
    position: absolute;
    bottom: 20upx;
    right: 0upx;
    display: inline-block;
    background: rgba(0,0,0,.5);
    color: rgba(255,255,255,0.8);
    padding: 5upx 10upx;
}

.no-content {
    color: #888;
    padding: 100upx 0 0 0;
    text-align: center;
}

.loading-more {
    text-align: center;
    opacity: 0;
}

.loading-more.active {
    opacity: 1;
}

.loading-more image {
    width: 160upx;
    height: 80upx;
}

.nnavbar {
    position: fixed;
    top: var(--window-top);
    z-index: 4;
    height: 90upx;
    width: 100%;
    white-space: nowrap;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e2e2;
    color: #353535;
    border-top: 1px solid #e2e2e2;
}

.navbar-item {
    display: inline-block;
    margin: auto 32upx;
    height: 86upx;
}

.navbar-item-active {
    color: #ff4544;
    border-bottom: 4upx solid #ff4544!important;
}

.navbar-item-wrap {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding-top: 17upx;
}

.navbar-arrow-down {
    display: flex;
    position: fixed;
    top: var(--window-top);
    right: 0;
    z-index: 5;
    width: 96upx;
    height: 72upx;
    background-color: #ffffff;
    align-items: center;
}

.navbar-arrow-down-wrap {
    display: flex;
    width: 100%;
    justify-content: center;
}

.channel-setting {
    display: none;
    position: fixed;
    top: var(--window-top);
    z-index: 6;
    width: 100%;
    height: 80upx;
    background-color: #f5f6f7;
}

.articles {
    min-height: calc(100% - 72upx);
}

.article {
    display: flex;
    height: 72upx;
    align-items: center;
    justify-content: center;
}

.hideview {
    background: #f7f7f7;
    height: 106upx;
    width: 100%;
    display: block;
}

.view1 {
    height: 100%;
    width: 100%;
}

.after-navber .active {
    padding-top: 10upx;
}
</style>
